<template>
  <e-group :value="myValue" @add="handleAdd" @remove="handleRemove" :button-disabled="buttonDisabled" :simple-layout="true">
    <template slot-scope="scope">
      <el-date-picker v-bind="$props" v-model="myValue[scope.index]"  type="date" placeholder="选择请假时间" 
        :picker-options="pickerOptions" @change="handleChange(scope.index,$event)" />
    </template>
  </e-group>
</template>
<script>

  import {DatePicker} from '@element-ui'
  import EGroup from '@e-ui/Group'
  export default {
    components: {
      EGroup
    },
    props: {
      ...ui.default.DatePicker.props, // 继承Input的所有属性
      ...EGroup.props,
      value: {
        type: Array
      }
    },
    data () {
      let myValue = this.value
      if (!this.value || this.value.length === 0) {
        myValue = ['']
      }
      return {
        myValue,
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      }
    },
    methods: {
      handleChange (index, value) {
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      },
      handleAdd (index) {
        this.myValue.push('')
      },
      handleRemove (index) {
        this.myValue.splice(index, 1)
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      }
    }
  }
</script>

<style lang="scss">
    
</style>
